<template>
  <el-card class="box-card">
    <template #header>
      <h3 class="users-title">用户管理</h3>
    </template>
    <el-button type="primary" @click="$router.history.push('/users/add')"
      >添加</el-button
    >
    <el-button type="danger" @click="deleteSelectAll">批量删除</el-button>
    <el-table
      :data="users"
      v-loading="loading"
      @selection-change="handleSelectAllChange"
      :default-sort="{prop:'createTime',order:'descending'}"
      border
    >
      <el-table-column type="selection" width="50" align="center">
      </el-table-column>
      <el-table-column type="index" label="序号" width="50" align="center">
      </el-table-column>
      <el-table-column prop="username" label="用户名"> </el-table-column>
      <el-table-column prop="nickname" label="昵称"> </el-table-column>
      <el-table-column prop="createTime" :formatter="dayFormatter" label="创建时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <el-button
              type="warning"
              icon="el-icon-edit"
              size="mini"
              @click="
                $router.history.push({ name: 'UserUpdate', query: scope.row })
              "
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="showDialog(scope.row)"
            ></el-button>
          </el-tooltip>
          <el-dialog title="提示" :visible="dialogVisible" width="20%">
            <span>确认删除用户:{{ dialogContent }}?</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="delUser(dialogId)"
                >确 定</el-button
              >
            </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handldPageSizeChange"
      @current-change="handldPageChange"
      :current-page="page"
      :page-sizes="[3, 6, 9, 12]"
      :page-size="limit"
      layout="prev, pager, next, jumper,total, sizes"
      :total="total"
    >
    </el-pagination>
  </el-card>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import dayjs from 'dayjs'
export default {
  name: 'Users',
  data() {
    return {
      page: 1,
      limit: 3,
      dialogVisible: false,
      dialogId: '',
      dialogContent: '',
      loading: false,
      deleteIds: [],
    }
  },
  mounted() {
    this.getUsers({ page: this.page, limit: this.limit })
  },
  computed: {
    ...mapState('users', ['users', 'total']),
  },
  methods: {
    ...mapActions('users', ['getUsers', 'deleteUser']),
    handldPageChange(page) {
      this.page = page
      this.getUsers({ page, limit: this.limit })
    },
    handldPageSizeChange(limit) {
      this.limit = limit
      this.getUsers({ page: this.page, limit })
    },
    handleSelectAllChange(rows) {
      console.log(rows);
      if (rows.length) {
        this.deleteIds = rows.reduce((prev, row) => {
          prev.push(row.id)
          return prev
        }, [])
      } else {
        this.deleteIds = []
      }
    },
    showDialog(user) {
      this.dialogVisible = true
      this.dialogContent = user.username
      this.dialogId = user.id
    },
    delUser(id) {
      this.deleteUser(id)
      this.getUsers({ page: this.page, limit: this.limit })
      this.dialogVisible = false
      this.$message({
        message: '删除成功',
        type: 'success',
      })
    },
    deleteSelectAll() {
      if (!this.deleteIds.length) {
        this.$message({
          message: '请选中要删除的数据',
          type: 'waring',
        })
        return
      }
      this.deleteIds.forEach((id) => {
        this.deleteUser(id)
      })
      this.$message({
        message: '删除成功',
        type: 'success',
      })
      this.getUsers({ page: this.page, limit: this.limit })
    },
    dayFormatter(row){
      return dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
    }
  },
}
</script>
<style>
.users-title {
  margin: 0;
}

.el-table {
  margin: 10px auto;
}
.item {
  margin: 4px;
}
.el-pagination {
  margin-top: 20px;
}

.el-pagination__total,
.el-pagination__sizes {
  float: right;
}
</style>
